<template lang="html">
  <span :class="classStyle">
    <span :class="addressText?'address-county':'address-county huise'" @click="openPickerAddress">{{ addressText?addressText:placeholder }}</span>
    <div class="arrow-right" @click="openPickerAddress">
      <img class="max" src="/static/modules/address/arrow-right.png" alt="">
    </div>
    <mt-popup
            v-model="isShowAddress"
            position="bottom">
        <div class="btns" v-cloak>
            <span class="btn btn-cancel" @click="isShowAddress = false">取消</span>
            <span class="btn btn-define" @click="clickDefine">确定</span>
        </div>
        <mt-picker ref="addressPicker" :slots="addressSlots" @change="onMyAddressChange"></mt-picker>
    </mt-popup>
  </span>
</template>

<script>
import address from '@/util/address'
import { Toast  } from 'mint-ui';
const addressJsonData = address.address3;

export default {
  props: ['placeholder', 'classStyle', 'address'],
  data() {
    return {
      isShowAddress: false,
      addressSlots: [
          {
              flex: 1,
              defaultIndex: 0,
              values: [],
              className: 'slot1',
              textAlign: 'center',
          }, {
              divider: true,
              content: '-',
              className: 'slot2'
          }, {
              flex: 1,
              values: [],
              className: 'slot3',
              textAlign: 'center',
          }, {
              divider: true,
              content: '-',
              className: 'slot4'
          }, {
              flex: 1,
              values: [],
              className: 'slot5',
              textAlign: 'center',
          }
      ],
      addressProvince: '',
      addressCity: '',
      addressCounty: '',
      addressText: '',
    }
  },
  created() {

    var objAddress = Object.keys(addressJsonData);
    // 省
    this.addressSlots[0].values = objAddress;
    // 市
    this.addressSlots[2].values = Object.keys(addressJsonData[objAddress[0]])
    // 区
    this.addressSlots[4].values = addressJsonData[objAddress[0]][Object.keys(addressJsonData[objAddress[0]])[0]]


    // 编辑时，设置默认值
    if(this.address && this.address.length>0){
      this.addressText = this.address[0]+'-'+this.address[1]+'-'+this.address[2];
      var provinceNum = 0, cityNum = 0, countyNum = 0;
      // 省的默认值
      for (var provinceKey in addressJsonData) {
        provinceNum++;
        if(provinceKey == this.address[0]){
          this.addressSlots[0].defaultIndex = provinceNum - 1;
        }
      }

      // 市的默认值
      this.addressSlots[2].values = Object.keys(addressJsonData[objAddress[this.addressSlots[0].defaultIndex]]);
      for (var cityKey in Object.keys(addressJsonData[objAddress[this.addressSlots[0].defaultIndex]])) {
        cityNum++;
        if(Object.keys(addressJsonData[objAddress[this.addressSlots[0].defaultIndex]])[cityKey] == this.address[1]){
          this.addressSlots[2].defaultIndex = parseInt(cityKey);
        }
      }

      // 区的默认值
      this.addressSlots[4].values = addressJsonData[objAddress[this.addressSlots[0].defaultIndex]][this.address[1]]
      for (var countyKey in this.addressSlots[4].values) {
        countyNum++;
        if(this.addressSlots[4].values[countyKey] == this.address[2]){
          this.addressSlots[4].defaultIndex = parseInt(countyNum) - 1;
        }
      }
    }
  },
  methods: {
    // 打开地址选择
    openPickerAddress() {
        this.isShowAddress = true;
    },
    // 选择地区
    onMyAddressChange(picker, values) {
      if (addressJsonData[values[0]]) { //这个判断类似于v-if的效果（可以不加，但是vue会报错，很不爽）
        picker.setSlotValues(1, Object.keys(addressJsonData[values[0]])); // Object.keys()会返回一个数组，当前省的数组
        picker.setSlotValues(2, addressJsonData[values[0]][values[1]]); // 区/县数据就是一个数组
        console.log(picker)
        this.addressProvince = values[0];
        this.addressCity = values[1];
        this.addressCounty = values[2];
      }
    },
    // 选择地址 确定
    clickDefine() {
      if (!this.addressCity || !this.addressCounty) {
          Toast('请选择省市区');
          return
      } else {
          this.isShowAddress = false;
          this.addressText = this.addressProvince + '-' + this.addressCity + '-' + this.addressCounty;
          this.$emit('getSelectAddress', this.addressText)
      }
    },

  }
}
</script>

<style lang="scss" scoped>
.address{
  position: relative;
  span{
    border-bottom: 1px solid #f7f7f7;
    width: 6.9rem;
    line-height: 1rem;
    margin-left: .3rem;
    display: inline-block;
  }
  .arrow-right{
    position: absolute;
    right: -.1rem;
    top: -.2rem;
    width: .8rem;
  }
}
.mint-popup {
    width: 100%;
}

.btns {
    border: 1px solid #eee;
    display: flex;
    .btn {
        flex: 1;
        text-align: center;
        line-height: 38px;
        color: #26a2ff;
    }
    .btn-cancel{
      color: #999;
    }
}
.huise{
  color: #888;
}
</style>
